<template>
<div class="col-lg-12 control-section card-control-section swipe_card_layout">
    <div class="e-card-resize-container">
        <div class="row">
            <div class="row card-layout">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6" id="horizontal_product">
                    <!-- Swipe Card Layout  -->
                    <div tabindex="0" class="e-card e-card-horizontal">
                        <img src="./images/newyork.png" style="height:214px">
                        <div class="e-card-stacked">
                            <div class="e-card-content" style="height: 175px">
                                New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact
                                upon commerce and etc...
                            </div>
                            <div class="e-card-actions">
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-fav-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-like-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-share-icon cb-icons "></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div tabindex="0" class="e-card e-card-horizontal">
                        <img src="./images/malaysia.png" style="height:214px">
                        <div class="e-card-stacked">
                            <div class="e-card-content" style="height: 175px">
                                Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized
                                as part of the Asian continent.
                            </div>
                            <div class="e-card-actions">
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-fav-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-like-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-share-icon cb-icons "></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div tabindex="0" class="e-card e-card-horizontal">
                        <img src="./images/eiffeltower.png" style="height:214px">
                        <div class="e-card-stacked">
                            <div class="e-card-content" style="height: 175px">
                                The Eiffel Tower is acknowledged as the universal symbol of Paris and France. It was originally designed by Émile Nouguier
                                and Maurice Koechlin.
                            </div>
                            <div class="e-card-actions">
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-fav-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-like-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-share-icon cb-icons "></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div tabindex="0" class="e-card e-card-horizontal">
                        <img src="./images/sydney.png" style="height:214px">
                        <div class="e-card-stacked">
                            <div class="e-card-content" style="height: 175px">
                                Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people
                                live in Sydney which makes it the biggest city in Oceania.
                            </div>
                            <div class="e-card-actions">
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-fav-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-like-icon cb-icons "></span>
                                </button>
                                <button style="padding:0px;border:0px;height: 24px;width: 24px;">
                                    <span class="e-share-icon cb-icons "></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="source_link">Source: &nbsp;
        <table>
            <tbody><tr>
                <td>
                    <a href="https://wikitravel.org/en/Malaysia" target="_blank">https://wikitravel.org/en/Malaysia</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://wikitravel.org/en/Sydney" target="_blank">https://wikitravel.org/en/Sydney</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://en.wikipedia.org/wiki/Eiffel_Tower" target="_blank">https://en.wikipedia.org/wiki/Eiffel_Tower</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://wikitravel.org/en/New_York_City" target="_blank">https://wikitravel.org/en/New_York_City</a>
                </td>
            </tr>
        </tbody></table>
    </div>
        <div id="action-description">
    <p>This sample demonstrates <code>card</code> rendering with stacked layout. You can swipe the card in left or right direction to move the first card to last position.</p>
</div>
<div id="description">
    <p>The sample illustrates stacked collection of card overlapping each other, which can be bound to swipe actions to move cards one after the other. CSS animation is used to achieve swiping on every left or right swipe.</p>
    <p>More information about Card can be found in this<a href="https://ej2.syncfusion.com/vue/documentation/card/getting-started/" target="_blank"> documentation</a> section.</p>
</div>
</div>
</template>
<style>
 @font-face {
        font-family: 'Card_Icon';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .fabric .card-control-section.swipe_card_layout .e-card:hover,
    .highcontrast .card-control-section.swipe_card_layout .e-card:hover {
        border-width: 1px;
        padding: 1px;
    }

    .card-control-section.swipe_card_layout #horizontal_product .e-card .cb-icons {
        display: flex;
        width: inherit !important;
        height: inherit !important;
        font-size: 18px !important;
        justify-content: center;
        flex-direction: column;
    }

    .cb-icons {
        margin: auto;
        font-family: 'Card_Icon';
        speak: none;
        width: 38px !important;
        height: 38px !important;
        font-size: 37px !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .e-fav-icon.cb-icons::before {
        content: '\e700';
    }

    .e-like-icon.cb-icons::before {
        content: '\e703';
    }

    .e-share-icon.cb-icons::before {
        content: '\e704';
    }

    .card-control-section.swipe_card_layout #source_link {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .card-control-section.swipe_card_layout .row.card-layout {
        display: flex;
    }

    .card-control-section.swipe_card_layout .row.card-layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
        margin: 0 auto;
    }

    .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked .e-card-actions {
        flex-grow: 1;
    }

    .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked .e-card-actions button {
        background: #fff;
        margin-left: 5px;
        margin-right: 5px;
        background-color: transparent;
        }

    .card-control-section.swipe_card_layout .e-card.e-card-horizontal .e-card-stacked> :first-child {
        flex-grow: initial;
    }

    .card-control-section.swipe_card_layout #horizontal_product .e-card {
        user-select: none;
        width: calc(100% - 15px);
    }

    .card-control-section.swipe_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
        position: relative;
        top: 50px;
        width: 100%;
    }

    .card-control-section.swipe_card_layout {
        min-height: 450px;
    }

    .card-control-section.swipe_card_layout #horizontal_product .e-card {
        position: absolute;
        transition: all 200ms;
        touch-action: none;
    }

    .card-control-section.swipe_card_layout .card-out {
        animation: card-out 0.3s cubic-bezier(.8, .2, .1, 0.8);
        transform: translateX(0px) rotate(0deg) translateY(0px) scale(1);
    }

    .card-control-section.swipe_card_layout .card-out-left {
        animation: card-out-left 0.3s cubic-bezier(.8, .2, .1, 0.8);
        transform: translateX(0px) rotate(0deg) translateY(0px) scale(1);
    }

    @keyframes card-out-left {
        0% {
            z-index: 20;
            transform: translateX(0px) translateY(0px);
        }
        10% {
            transform: translateX(-50px) translateY(0px);
        }
        20% {
            transform: translateX(-100px) translateY(0px);
        }
        30% {
            transform: translateX(-150px) translateY(0px);
        }
        40% {
            transform: translateX(-200px) translateY(0px);
        }
        50% {
            transform: translateX(-250px) translateY(0px);
        }
        60% {
            transform: translateX(-200px) translateY(0px);
            z-index: 0;
        }
        70% {
            transform: translateX(-150px) translateY(0px);
            z-index: 0;
        }
        80% {
            transform: translateX(-100px) translateY(0px);
            z-index: 0;
        }
        90% {
            transform: translateX(-50px) translateY(0px);
            z-index: 0;
        }
        100% {
            transform: translateX(0px) translateY(0px) scale(1);
        }
    }

    @keyframes card-out {
        0% {
            z-index: 20;
            transform: translateX(0px) translateY(0px);
        }
        10% {
            transform: translateX(50px) translateY(0px);
        }
        20% {
            transform: translateX(100px) translateY(0px);
        }
        30% {
            transform: translateX(150px) translateY(0px);
        }
        40% {
            transform: translateX(200px) translateY(0px);
        }
        50% {
            transform: translateX(250px) translateY(0px);
        }
        60% {
            transform: translateX(200px) translateY(0px);
            z-index: 0;
        }
        70% {
            transform: translateX(150px) translateY(0px);
            z-index: 0;
        }
        80% {
            transform: translateX(100px) translateY(0px);
            z-index: 0;
        }
        90% {
            transform: translateX(50px) translateY(0px);
            z-index: 0;
        }
        100% {
            transform: translateX(0px) translateY(0px) scale(1);
        }
    }

    .card-control-section.swipe_card_layout .e-card>* {
        max-width: 50%;
        justify-content: flex-start;
    }

    #source_link {
        float: right;
        margin-right: 10px;
    }

    @media screen and (max-width: 768px) {
        #source_link {
            margin-top: -10px;
            margin-right: 0px;
        }
    }

    @media (min-width: 540px) {
        .card-control-section.swipe_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
            width: 50%;
        }
        .card-control-section.swipe_card_layout .card-layout {
            margin: auto;
            max-width: 870px;
        }
    }
</style>
<script>
import Vue from "vue";
import { Touch, ScrollEventArgs, SwipeEventArgs, closest, isNullOrUndefined } from '@syncfusion/ej2-base';
export default Vue.extend({
    
	mounted: function() {
        var dir;
        var ele = document.getElementById('horizontal_product');
        this.swipeable();
        var touch =new Touch(ele, { swipe: this.touchSwipeHandler });
        var temp = 0;
        var cards = document.querySelectorAll('#horizontal_product .e-card');

        [].slice.call(cards).forEach(function (ele) {
            ele.querySelector('img').onmousedown = function () { return false; };
        });
	},
    methods: {
    swipeable: function() {
            var fanStructuteCard = document.querySelectorAll('#horizontal_product .e-card');
            var len = fanStructuteCard.length;
            [].slice.call(fanStructuteCard).forEach(function (ele) {
                ele.style.removeProperty('transform');
            });
            var transformRatio = 2;
            var temp;
            var divide = (parseInt((len / 2).toString(), 10));
            temp = transformRatio;
            for (var i = divide - 1; i >= 0; i--) {
                fanStructuteCard[i].style.transform = 'rotate(' + (temp) + 'deg)';
                temp += transformRatio;
            }
            transformRatio = 2;
            temp = transformRatio;
            for (var j = divide + 1; j < len; j++) {
                fanStructuteCard[j].style.transform = 'rotate(' + (-temp) + 'deg)';
                temp += transformRatio;
            }
    },
     touchSwipeHandler: function(e) {
            var ele = closest(e.originalEvent.target, '.e-card');
            if (isNullOrUndefined(ele)) {
                return;
            }
            if (ele.parentElement.querySelector('.card-out')) {
                ele.parentElement.querySelector('.card-out').classList.remove('card-out');
            }
            if (ele.parentElement.querySelector('.card-out-left')) {
                ele.parentElement.querySelector('.card-out-left').classList.remove('card-out-left');
            }
            e.swipeDirection === 'Right' ? ele.classList.add('card-out') : ele.classList.add('card-out-left');
            ele.parentElement.insertBefore(ele, ele.parentElement.children[0]);
            this.swipeable();
            ele.style.removeProperty('left');
     }
  }
});

</script>